<template>
	<view class="fixtop">
		<fixtop>
			<template #l>
				<view class="icon">
					<view class="iconfont icon-jiantouyou" @click="goback"></view>
				</view>
			</template>
			<template #c>
				<view class="center-ti">申请记录</view>
			</template>
		</fixtop>
	</view>
	<view class="con" style="overflow: auto;">
		<view class="card-con" v-if="shopperinfo" v-for="(item,index) in shopperinfo" :key="index" style="margin-top: 20rpx;">
			<view class="t">
				<view class="l">
					<view class="iconfont icon-dianpu"></view>
				</view>
				<view class="c">
					<view class="c-t">{{item.dname}}</view>
					<view class="c-b">{{item.phone}}</view>
				</view>
				<view class="r">
					<view class="r-ct" @click="goxx(item)">
						详细 <view class="iconfont icon-jiantouyou"></view>
					</view>
				</view>
			</view>
			<view class="b">
				<view class="b-item">
					<view class="b-item-l">审核状态</view>
					<view class="b-item-r imports">{{isstatus(item.status)}}</view>
				</view>
				<view class="b-item">
					<view class="b-item-l">店铺类型</view>
					<view class="b-item-r">{{item.lx}}</view>
				</view>
				<view class="b-item">
					<view class="b-item-l">经营品类</view>
					<view class="b-item-r">{{item.fzlx}}</view>
				</view>
				<view class="b-item">
					<view class="b-item-l">申请时间</view>
					<view class="b-item-r">{{item.createdAt}}</view>
				</view>	

			</view>
		</view>
	</view>
	<view class="bofix">

		<view class="bu" @click="goback">
			返回
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	import {
		getshoppers
	} from '@/api/index.js'
	import userstore from '@/store/userinfo.js'
	const heights = getstatusheight() + gettitleheight() + 'px'
	import fixtop from '@/components/fixtop/fixtop.vue'
	const useuserstore = userstore()
	const shopperinfo = ref()
	onReady(() => {
		getshopperdata()
	})
	const isstatus = (id) => {
		let data
		switch (id) {
			case 0:
				data = "正在审核中~"
				break
			case 1:
				data = "审核通过~"
				break
			case 2:
				data = "店铺关闭~"
			case 4:
				data = "申请失败~"
				break
		}
		return data
	}
	const getshopperdata = async () => {
		const rudata = await getshoppers(useuserstore.userinfo.id)

		shopperinfo.value = rudata.data
	}
	const goback = () => {
		return uni.redirectTo({
			url: "/pages/index/index"
		})
	}
	const goxx = (item) => {
		uni.navigateTo({
			url: `/pages/shopperinfo/shopperinfo?data=${JSON.stringify(item)}`
		})
	}

</script>

<style lang="scss" scoped>
	.imports {
		font-weight: 700 !important;
		color: darkblue !important;
	}

	.bofix {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 200rpx;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;

		.bu {
			width: 90%;
			height: 80rpx;
			background-color: #ff6e53;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			font-weight: 700;
			border-radius: 80rpx;
			color: #fff;
		}
	}

	.fixtop {
		background-color: #ff644d;
		padding: 0 30rpx;
	}

	.icon {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 25rpx;
			transform: rotate(180deg);
			color: #fff;
		}
	}

	.center-ti {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		color: #fff;
	}

	.con {
		padding: 30rpx;
		width: 100%;
		height: calc(100vh - v-bind(heights));
		background-color: #f5f5f5;
       scrollbar-width: none;
		.card-con {
			height: 450rpx;
			width: 100%;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 20rpx;

			.t {
				width: 100%;
				height: 35%;
				border-bottom: 1rpx solid #f5f5f5;
				display: flex;

				.l {
					width: 90rpx;
					display: flex;
					justify-content: center;

					.iconfont {
						font-size: 50rpx;
						margin-top: 5rpx;
					}
				}

				.c {
					flex: 1;
					display: flex;
					flex-direction: column;

					.c-t {
						max-height: 50%;
						width: 100%;
						font-size: 27rpx;
						font-weight: 700;
						overflow: hidden;
						display: -webkit-box;
						line-height: 45rpx;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.c-b {
						flex: 1;
						font-size: 23rpx;
						color: #7b7b7b;
						display: flex;
						align-items: center;
					}
				}

				.r {
					width: 120rpx;

					.r-ct {
						height: 50%;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 25rpx;
						color: #ff644d;

						.iconfont {
							color: #000;
							font-size: 25rpx;
						}
					}

				}
			}

			.b {
				width: 100%;
				height: 65%;
				display: flex;
				flex-direction: column;
				padding: 20rpx;

				>view {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.b-item-l {
						font-size: 25rpx;
					}

					.b-item-r {
						font-size: 25rpx;
						color: #7b7b7b;
					}
				}
			}
		}
	}
</style>